<template>
  <div class="createPost-container">
    <el-form class="form-container">
      <div class="createPost-main-container">
        <el-row>
          <el-col :span="24">
            <div class="postInfo-container">
              <fieldset class="fieldInfo">
                <legend>
                  <!-- <svg-icon /> -->
                  <span>消息详情</span>
                </legend>
                <el-col :span="10">
                  <el-form-item label-width="90px" label="消息标题:" class="postInfo-container-item">
                    <b>{{list.messageDetail.messageTitle}}</b>
                  </el-form-item>
                </el-col>
                <el-col :span="10">
                  <el-form-item label-width="90px" label="发件时间:" class="postInfo-container-item">
                    <b>{{list.messageDetail.messageDispatchDate}}</b>
                  </el-form-item>
                </el-col>
                <el-col :span="10">
                  <el-form-item label-width="90px" label="发布人部门:" class="postInfo-container-item">
                    <b>{{list.messageDetail.dispatcherOrgName}}</b>
                  </el-form-item>
                </el-col>
                <el-col :span="10">
                  <el-form-item label-width="90px" label="发布对象:" class="postInfo-container-item">
                    <b
                      v-if="list.messageDetail.dispatchObjectName&&list.messageDetail.dispatchObjectName.length>0"
                    >{{list.messageDetail.dispatchObjectName}}</b>
                    <b v-else>暂无...</b>
                  </el-form-item>
                </el-col>
                <el-col :span="10">
                  <el-form-item label-width="90px" label="发布人:" class="postInfo-container-item">
                    <b>{{list.messageDetail.dispatcherName}}</b>
                  </el-form-item>
                </el-col>
                <el-col :span="10">
                  <el-form-item label-width="90px" label="消息级别:" class="postInfo-container-item">
                    <b v-if="list.messageDetail.messageLevel == 1">一般</b>
                    <b v-if="list.messageDetail.messageLevel == 2">重要</b>
                    <b v-if="list.messageDetail.messageLevel == 3">紧急</b>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label-width="90px" label="消息内容:" class="postInfo-container-item">
                    <b>{{list.messageDetail.messageContent}}</b>
                  </el-form-item>
                </el-col>
              </fieldset>

              <fieldset class="fieldInfo">
                <legend>
                  <!-- <svg-icon /> -->
                  <span>阅读详情</span>
                </legend>
                <el-tag
                  v-for="item in list.readUsernameList"
                  :key="item.index"
                  style="margin-right:5px"
                >{{item}}</el-tag>
              </fieldset>
              <fieldset class="fieldInfo">
                <legend>
                  <!-- <svg-icon /> -->
                  <span>回复详情</span>
                </legend>
                <div v-if="list.replyDetailList&&list.replyDetailList.length>0">
                  <p v-for="item of list.replyDetailList" :key="item.index" class="revert">
                    <el-col :span="8">
                      <el-form-item label-width="90px" label="处理人:" class="postInfo-container-item">
                        <b>{{item.answererName}}</b>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item
                        label-width="90px"
                        label="处理时间:"
                        class="postInfo-container-item"
                      >
                        <b>{{item.replyTime}}</b>
                      </el-form-item>
                    </el-col>
                    <el-col :span="24">
                      <el-form-item label-width="90px" label="内容:" class="postInfo-container-item">
                        <b>{{item.replyContent}}</b>
                      </el-form-item>
                    </el-col>
                  </p>
                </div>

                <p v-else style="font-size:14px">暂无回复内容...</p>
              </fieldset>
              <fieldset class="fieldInfo" v-if="this.type=='reply'">
                <legend>
                  <!-- <svg-icon /> -->
                  <span>处理意见</span>
                </legend>
                <el-form :rules="rules" ref="replyForm" :model="replyForm">
                  <el-row>
                    <el-col :span="24">
                      <el-form-item label-width="130px" label="意见:" width="100%" prop="idea">
                        <el-input
                          type="textarea"
                          :rows="4"
                          maxlength="300"
                          show-word-limit
                          placeholder="请输入处理意见"
                          v-model="replyForm.idea"
                        ></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row style="margin-top:30px">
                    <el-col :span="7">
                      <el-form-item label-width="130px" label="转发对象:">
                        <el-input
                          type="text"
                          placeholder="选择对象"
                          v-model="replyForm.selectedText"
                          disabled
                        ></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="3" class="adaptPad">
                      <el-form-item style="margin-left:5px">
                        <el-button
                          type="primary"
                          icon="el-icon-plus"
                          @click="personSelectDialogVisible=true"
                        ></el-button>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="24">
                      <el-form-item style="text-align: center;margin-top:20px">
                        <el-button type="primary" @click="subMessage">提交</el-button>
                        <el-button @click="closeCurrentTag">关闭</el-button>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-form>
              </fieldset>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-form>
    <el-dialog title="用户对象" :visible.sync="personSelectDialogVisible" class="selectPerson">
      <div class="left">
        <fieldset class="fieldInfo">
          <legend>
            <span>组织机构树</span>
          </legend>
          <div class="tree">
            <el-tree
              ref="organizationTree"
              :data="organizationData"
              node-key="id"
              default-expand-all
              :expand-on-click-node="false"
              @node-click="handleNodeClick"
              :props="defaultProps"
            ></el-tree>
          </div>
        </fieldset>
      </div>
      <div class="right">
        <fieldset class="fieldInfo">
          <legend>
            <span>所有人员</span>
          </legend>
          <div>
            <el-checkbox
              :indeterminate="isIndeterminate"
              v-model="checkAll"
              @change="handleCheckAllChange"
            >全选</el-checkbox>
            <div style="margin: 15px 0;"></div>
            <el-checkbox-group v-model="checkedUserList" @change="handleCheckedCitiesChange">
              <el-checkbox
                v-for="(user,index) in userListOptions"
                :key="index"
                :label="user.id"
              >{{user.userName}}</el-checkbox>
            </el-checkbox-group>
          </div>
        </fieldset>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="personSelectDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmUsers">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { fetchMessage, replyMessage, forwardMessage } from '@/api/message'
import { searchUser } from '@/api/user'
import { fetchTreeData, fetchUserListByOrg } from '@/api/organization'
export default {
  name: 'MessageDetail',
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'info',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      type: '',
      msgId: '',
      defaultProps: {
        label: 'name'
      },
      organizationData: [],
      isIndeterminate: true,
      checkAll: false,
      checkedUserList: [],
      userListOptions: [],
      personSelectDialogVisible: false, //用户选择对话框
      list: {
        messageDetail: {
          messageTitle: '',
          messageDispatchDate: '',
          dispatcherOrgName: '',
          dispatchObjectName: [],
          dispatcherName: '',
          messageLevel: '',
          messageContent: ''
        },
        readUsernameList: [],
        replyDetailList: []
      },

      // postForm: [{ selectedText: '', dipatcherIdList: [] }],
      replyForm: {
        idea: '',
        dipatcherIdList: [],
        selectedText: ''
      },
      rules: {
        idea: [
          { required: true, message: '处理意见内容不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    const msgId = this.$route.params && this.$route.params.id
    this.type = this.$route.params && this.$route.params.type
    if (msgId) {
      this.fetchData(msgId)
      this.msgId = msgId
    }
    this.getTreeData()
    this.tempRoute = Object.assign({}, this.$route)
  },
  methods: {
    //消息详情
    fetchData(msgId) {
      fetchMessage(msgId)
        .then((response) => {
          this.list = response.data
          this.setTagsViewTitle()
          this.setPageTitle()
        })
        .catch((err) => {
          console.log(err)
        })
    },
    // 获取用户对象
    getRemoteUserList(orgId) {
      // this.personSelectDialogVisible = true
      fetchUserListByOrg(orgId).then((response) => {
        // if (!response.data.records) return
        this.userListOptions = response.data.map((v) => {
          return {
            id: v.id,
            userLoginAccount: v.userLoginAccount,
            userName: v.userName
          }
        })
        // console.log(this.userListOptions)
      })
    },
    handleNodeClick(data, node) {
      console.log(data, node)
      this.getRemoteUserList(data.id)
    },
    getTreeData() {
      fetchTreeData({
        rootId: 0
      }).then((response) => {
        console.log(response.data)
        this.organizationData = response.data
      })
    },
    handleCheckAllChange(val) {
      this.checkedUserList = val
        ? this.userListOptions.map((u) => {
            return u.id
          })
        : []
      this.isIndeterminate = false
    },
    handleCheckedCitiesChange(value) {
      let checkedCount = value.length
      this.checkAll = checkedCount === this.userListOptions.length
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.userListOptions.length
    },
    closeCurrentTag() {
      // 调用全局挂载的方法
      this.$store.dispatch('tagsView/delView', this.$route)
      // 返回上一步路由
      this.$router.go(-1)
    },
    confirmUsers() {
      this.replyForm.dipatcherIdList = this.checkedUserList
      console.log('this.checkedUserList', this.checkedUserList)
      this.replyForm.selectedText = `已选择${this.checkedUserList.length}人`
      this.personSelectDialogVisible = false
    },
    //提交回复
    subMessage() {
      this.$refs.replyForm.validate((valid) => {
        if (valid) {
          if (
            this.replyForm.dipatcherIdList &&
            this.replyForm.dipatcherIdList.length > 0
          ) {
            //转发消息
            forwardMessage({
              forwardIds: this.replyForm.dipatcherIdList,
              msgId: this.msgId,
              replyContent: this.replyForm.idea
            }).then((res) => {
              if (res.success) {
                this.$notify({
                  title: '成功',
                  message: '消息转发成功',
                  type: 'success',
                  duration: 2000
                })
              } else {
                this.$notify({
                  title: '失败',
                  message: '消息转发失败',
                  type: 'error',
                  duration: 2000
                })
              }
            })
          } else {
            //回复消息
            replyMessage({
              msgId: this.msgId,
              replyContent: this.replyForm.idea
            }).then((res) => {
              if (res.success) {
                this.$notify({
                  title: '成功',
                  message: '消息回复成功',
                  type: 'success',
                  duration: 2000
                })
                this.fetchData(this.msgId)
              } else {
                this.$notify({
                  title: '失败',
                  message: '消息回复失败',
                  type: 'error',
                  duration: 2000
                })
              }
            })
          }
        } else {
          this.$notify({
            title: '失败',
            message: '验证失败',
            type: 'error',
            duration: 2000
          })
          return false
        }
      })
    },
    setTagsViewTitle() {
      const title = '消息详情'
      const route = Object.assign({}, this.tempRoute, {
        title: `${title}-${this.msgId}`
      })
      this.$store.dispatch('tagsView/updateVisitedView', route)
    },
    setPageTitle() {
      const title = '消息详情'
      document.title = `${title} - ${this.msgId}`
    }
    // getRemoteUserList(query) {
    //   //转发对象的
    //   searchUser(query).then((response) => {
    //     if (!response.data.items) return
    //     this.userListOptions = response.data.items.map((v) => v.name)
    //   })
    // }
  }
}
</script>

<style scoped  lang="scss" >
@import '~@/styles/mixin.scss';
.edit-input {
  padding-right: 100px;
}
.cancel-btn {
  position: absolute;
  right: 15px;
  top: 10px;
}
.createPost-container {
  //
  position: relative;

  .createPost-main-container {
    padding: 40px 45px 20px 50px;

    .postInfo-container {
      position: relative;
      @include clearfix;
      margin-bottom: 10px;

      .postInfo-container-item {
        float: left;
      }
      .fieldInfo {
        margin-bottom: 20px;
      }
      .el-form-item {
        margin-bottom: 0;
      }
    }
  }
  .revert {
    width: 98%;
    margin: 0 auto;
    border-bottom: 1px #666 solid;
    overflow: hidden;
  }
  .revert:last-child {
    width: 98%;
    margin: 0 auto;
    border-bottom: none;
    overflow: hidden;
  }
  .fieldInfo {
    border-color: #eee;
    border-width: 1px;
    border-style: solid;
    margin-bottom: 20px;
  }
  .word-counter {
    width: 40px;
    position: absolute;
    right: 10px;
    top: 0px;
  }
}
.selectPerson /deep/ .el-dialog__body {
  display: flex;
  .left {
    flex: 1;
  }
  .right {
    flex: 1;
  }
}
.adaptPad {
  @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
    text-align: center;
  }
}
</style>
